<template>
	<div>
		<div class="layout-breadcrumb">
			<Breadcrumb>
			    <BreadcrumbItem href="/">首页</BreadcrumbItem>
			    <BreadcrumbItem href="/configs/">系统配置</BreadcrumbItem>
			    <BreadcrumbItem href="/configs/banner">广告管理</BreadcrumbItem>
			</Breadcrumb>
		</div>
		<div class="layout-content">
		    <div class="layout-content-main">
		    	<Row :gutter="16" v-if="perCheck.configs_banner_create">
		    		<ICol span="6"><IButton type="primary" @click="newBanner">添加新广告</IButton></ICol>
		    		<ICol span="6" offset="11"></ICol>
		    	</Row>
		    	<BaseTable ref="table" :url="table.url" :header="table.header" ></BaseTable>
		    </div>
		</div>
		<Update ref="update" @resetTable="resetTable"></Update>
	</div>
</template>
<script>
	import {Row,Col} from 'iview/src/components/grid';
	import Breadcrumb from 'iview/src/components/breadcrumb';
	import IButton from 'iview/src/components/button';
	
	import Update from 'admin/components/configs/banner/update';
	import Axios from 'admin/config/axios';
	import BaseTable  from 'admin/components/table/base';
	import {Permissions,Check} from 'admin/config/permissions';

	export default{
		components:{
			Row,
            'ICol':Col,
            Breadcrumb,
            'BreadcrumbItem' : Breadcrumb.Item,
            BaseTable,
            IButton,
            Update,
        },
        data () {
            return {
            	table:{
            		url : '/admin/configs/banner/view/list',
            		header: []
            	},
            	updateModal : true,
                perCheck : Permissions,
            }
        },
        methods:{
        	resetTable(params){
        		this.$refs['table'].tableData(params);
        	},
        	newBanner(){
        		this.$refs['update'].modal = true;
        	}
        },
        created:function(){
            Check('configs/permission',this.perCheck).then(res=>{
                this.perCheck = res;
            });
        	this.table.header =  [
                {
			        title: '名称',
			        key: 'name'
			    },
			    {
			        title: '链接',
			        key: 'link'

			    },
			    {
			        title: '图片',
			        key: 'pic',
			        render:(h,params) =>{
			        	return h('img',{
			        		attrs:{
			        			src : params.row.pic,
			        			style : 'width:200px;',
			        		}
			        	})
			        }
			    },
			    {
			        title: '操作',
			        key: 'action',
			        width: 150,
			        align: 'center',
			        render: (h, params) => {
			            return h('div', [
			            	!this.perCheck.configs_banner_update ? '' :
			                h(IButton, {
			                    props: {
			                        type: 'primary',
			                        size: 'small'
			                    },
			                    style: {
			                        marginRight: '5px'
			                    },
			                    on: {
			                        click: () => {
			                        	var update = this.$refs['update'];

			                        	Axios.Configs.Banner.Get(params.row.id)
							            .then(res =>{
							                if(!res) return false;
							                update.form.id = params.row.id;
							                update.form.name = params.row.name;
							                update.form.link = params.row.link;
							                update.form.pic = params.row.pic;
							                update.modal = true;
							            })
			                        }
			                    }
			                }, '编辑'),
			                !this.perCheck.configs_banner_delete ? '' :
			                h(IButton, {
			                    props: {
			                        type: 'error',
			                        size: 'small'
			                    },
			                    on: {
			                        click: () => {
			                        	this.$Modal.confirm({
						                    title: '你确定要删除吗？',
						                    content: '一旦删除无法恢复',
						                    onOk: () => {
						                        Axios.Configs.Banner.Del(params.row.id)
									            .then(res =>{
									               	if(!res) return false;
									                this.$refs['table'].tableData();
									            })
						                    }
						                });
			                        }
			                    }
			                }, '删除')
			            ]);
			        }
			    }
            ];
        }

	}
</script>